<template>
  <div class="ban">
    <span class="hao">近期最受电影</span>
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in arr" :key="item.id">
          <img :src="item.img" />
          <div class="on-look">{{ item.wish }}想看</div>
          <div class="ban-text">{{ item.nm }}</div>
          <div class="ban-day">{{ item.comingTitle }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import axios from "axios";
export default {
  name: "myconten",
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    axios.get("daiying.json").then((rel) => {
      console.log(rel);
      //图片w.h会报错，修改
      rel.data.coming.forEach((item) => {
        item.img = item.img.replace("w.h", "128.180");
      });
      this.arr = rel.data.coming;
    });
    let swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  },
};
</script>

<style scoped>
@import "../../node_modules/swiper/swiper.min.css";
.swiper-slide{
  width:85px !important;
  margin-right:0 !important;
  /* margin-left:30px; */
}
.swiper-slide img {
  display: block;
  width: 85px;
  height: 115px;
  object-fit: cover;
}
.ban {
  position: absolute;
  width: 100%;
  height: 4.133333333333334rem;
}
.ban .hao {
  display: block;
  margin: 0.26666666666666666rem 0.32rem;
  font-size: 0.37333333333333335rem;
  color: #333;
}
/* .mySwiper {
  position: relative;
  width: 100%;
  height: 4.266666666666667rem;
  display: flex;
  overflow: hidden;
} */
.swiper-slide {
  width: 85px;
  padding-left: 13px;
  height: 4.133333333333334rem;
}

.swiper-slide img {
  display: block;
  width: 85px;
  height: 115px;
  object-fit: cover;
}
.ban-text {
  width: 2.2666666666666666rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #222;
  font-size: 13px;
  font-weight: bold;
  margin-top: -10px;
} 
.on-look {
  text-align: center;
  position: relative;
  color: #faaf00;
  font-weight: 600;
  bottom: 20px;
  overflow: hidden;
  font-size: 13px;
}
 .ban-day {
  position: relative;
  color: #999;
}


</style>